<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<fieldset>
			<legend>记录列表</legend>
			<br>
				<div>
					姓名：
					<input type="text" id="name" placeholder="姓名"><br>
		
					<label>性别：</label>
					<input type= "radio" name='sex' id='sex1' checked  value="男"/>
					<label for="sex1">男</label>
					<input type="radio" name= 'sex' id='sex2' value="女"/>
					<label for="sex2">女</label><br>
			
					爱好：
					<input type="checkbox" name="habit" id="habit_h1" value="唱歌"/>
					<label for="habit_h1">唱歌</label>
					<input type="checkbox" name="habit" id="habit_h2" value="跑步"/>
					<label for="habit_h2">跑步</label>
					<input type="checkbox" name="habit" id="habit_h3" value="游泳"/>
					<label for="habit_h3">游泳</label><br>
		
					地址：
					<select id="address">
						<option selected>北京</option>
						<option>上海</option>
						<option>南京</option>
						<option>天津</option>
					</select><br>
					
					<button onclick="testadd()">添加</button><br><br>
					
					姓名：
					<input type="text" id="name2" placeholder="姓名">
					地址：
					<select id="address2">
						<option selected>北京</option>
						<option >上海</option>
						<option >南京</option>
						<option >天津</option>
					</select>
					<button onclick="testselect()">搜索</button><br><br>
				</div>
				<table style="border:1px solid black; width:1000px;" >
					<thead>
						<tr>
							<th style="width: 10%; text-align: left;">ID</th>
							<th style="width: 20%; text-align: left;">姓名</th>
							<th style="width: 15%; text-align: left;">性别</th>
							<th style="width: 25%; text-align: left;">爱好</th>
							<th style="width: 10%; text-align: left;">地址</th>
							<th style="width: 20%; text-align: left;">操作</th>
						</tr>
					</thead>
					<tbody id="tbody"></tbody>
				</table>
			</form>
		</fieldset>
		
		<script type="text/javascript">
			var id = 1;
			var sexs = $("input[name='sex']");
			var thabit = $('input[name="habit"]');
			var taddress = $('#address option');
			
			function getHabit(temp){
				var thabit = new Array();
				temp.each(function(i){
				    thabit[i] = $(this).val();
				});
				var habit ='';
				for(i=0;i<thabit.length-1;i++){
					habit = habit + thabit[i]+" ";
				}
				habit = habit + thabit[thabit.length-1];
				return habit;
			}
			
			function testadd(){
				var name = $("#name").val();
				var sex = $('input[name="sex"]:checked').val();
				
				var temp = $('input[name="habit"]:checked');
				var habit = getHabit(temp);
				
				var address = $("#address").val();
				
				var html = ""
				+"<tr id='tr"+id+"'>"
				+"<td id='tda"+id+"'>"+'#'+id +"</td>"
				+"<td id='tdb"+id+"'>"+ name +"</td>"
				+"<td id='tdc"+id+"'>"+ sex +"</td>"
				+"<td id='tdd"+id+"'>"+ habit +"</td>"
				+"<td id='tde"+id+"'>"+ address +"</td>"
				+"<td id='tdf"+id+"'><a href = 'javascript:testdel("+id+");'>删除</a> <a href = 'javascript:testupdate("+id+");' >修改</a></td>"
				+"</tr>"
				
				$("#tbody").append(html);
				id++;
			}
			function testdel(vid){
				if(confirm("是否删除该条记录？")){
					$("#tr"+vid).remove();	// remove自身及后代都会删除
					//empty 仅删除后代，自身会保留
				}
			}
			
			function testupdate(vid){// 回显
				
				// var habit =$("#tdd"+vid).html().split(" ");
				// var address =$("#tde"+vid).html();
			
				var sex='';
				var tmpsex='';
				var nowsex =$("#tdc"+vid).html();
				sexs.each(function(){
					if($(this).val()==nowsex){
						tmpsex='checked';
					}else{
						tmpsex='';
					}
				sex = sex + "<input type= 'radio' "+tmpsex+" name='tSex"+vid+"' id='sex"+i+1+"' value='"+$(this).val()+"'/><label for='sex"+i+1+"'>"+$(this).val()+"</label>"
				})
				
				var habit='';
				var tmphabit='';
				var nowhabit =$("#tdd"+vid).html().split(" ");
				thabit.each(function(i){
					for(var j=0;j<nowhabit.length;j++){
						if($(this).val()==nowhabit[j]){
							tmphabit='checked';
							break;
						}else{
							tmphabit='';
						}
					}
				habit = habit + "<input type='checkbox' name='tHabit"+vid+"' "+tmphabit+" id='habit"+i+1+"' value='"+$(this).val()+"'/><label for='habit"+i+1+"'>"+$(this).val()+"</label>";
				});
				
				var address='';
				var tmpaddress='';
				var nowaddress =$("#tde"+vid).html()
				taddress.each(function(i){
					if($(this).val()==nowaddress){
						tmpaddress='selected';
					}else{
						tmpaddress='';
					}
				address = address + "<option "+tmpaddress+">"+$(this).val()+"</option>";
				})
				
				$("#tdb"+vid).html("<input type='text' id='tName"+vid+"'+ value='"+$("#tdb"+vid).html()+"'/>");
				$("#tdc"+vid).html(sex);
				$("#tdd"+vid).html(habit);
				$("#tde"+vid).html("<select id='tAddress"+vid+"'>"+address+"</select>");
				$("#tdf"+vid).html("<a href='javascript:testsave("+vid+");'>保存</a>");
			}
			function testsave(vid){// 保存
				$("#tdb"+vid).html($("#tName"+vid).val());
				$("#tdc"+vid).html($("input[name='tSex"+vid+"']:checked").val());
				$("#tdd"+vid).html(getHabit($("input[name='tHabit"+vid+"']:checked")));
				$("#tde"+vid).html($("#tAddress"+vid).val());
				$("#tdf"+vid).html("<a href = 'javascript:testdel("+vid+");'>删除</a> <a href = 'javascript:testupdate("+vid+");' >修改</a>");
			}
			
			
			function testselect(){
				$("tr").css("background-color","");// 置空
				var valname =$("#name2").val();
				var valaddress =$("#address2").val();
				if(valname == "" ){
					alert("姓名不能为空！")
					return;
				}
				$("tr").each(function(){	// td[id^=''tdb'] 属性选择器
					if($(this).find("td[id^='tdb']").text().indexOf(valname)>-1){
						if($(this).find("td[id^='tde']").text().indexOf(valaddress)>-1)
							$(this).css("background-color","green");
					}
				})
			}
		
		</script>
	</body>
</html>
